import React, { Component } from 'react'
import { Form, Input, Button, Select, Checkbox, Row, Col, message } from 'antd'
import styles from './index.less'
import { perm, manager, role } from '../../../api/index'
export default class Add extends Component {
    state = {
        loading: false,
        data: [],
        dataRole: []
    }
    componentDidMount() {
        this.getListData()
    }
    getListData = async () => {
        const data = await perm.getList()
        this.setState({ data: data.data.filter(item => item.parentId === 0) })
        const dataRole = await role.getRoleList()
        console.log(dataRole);
        this.setState({ dataRole: dataRole.data })
    }
    // 新增
    onFinish = async (value) => {
        console.log(value);
        this.setState({ loading: true })
        const data = await manager.addManager(value)
        message.info(data.code === 200 ? "新增成功!" : "新增失败!");
        console.log(data);
        this.setState({ loading: false })
        this.formIns.resetFields(["account", "password", "permIds", "roleId"]);
    }
    onChange = (checkedValues) => {
        console.log('checked = ', checkedValues);
    }
    render() {
        const tailLayout = {
            wrapperCol: {
                offset: 10,
                span: 16,
            }
        }
        return (
            <div id="manager">
                <div className={styles.form}>
                    <Form layout="vertical"
                        onFinish={this.onFinish}
                        ref={(ins) => this.formIns = ins}
                    >
                        <Form.Item label="account:"
                            name="account"
                            rules={[{ required: true, message: 'Please input your account!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="password:"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="permIds:"
                            name="permIds"
                            rules={[{ required: true, message: 'Please input your permIds!' }]}
                        >
                            <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
                                <Row>
                                    {
                                        this.state.data.map(item => {
                                            return (
                                                <Col span={6} key={item.id}>
                                                    <Checkbox value={item.id}>{item.name}</Checkbox>
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item label="roleId:"
                            name="roleId"
                            rules={[{ required: true, message: 'Please input your roleId!' }]}
                        >
                            <Select placeholder='请选择'>
                                {
                                    this.state.dataRole.map(item => {
                                        return (
                                            <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" loading={this.state.loading}>
                                确认新增
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div >
        )
    }
}
